<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{background-image: url("img/zhuce.jpg")}
        #yanzhengdianhua{
            padding-top: 20px;
            background-color: white;
            z-index: 10;
            float: left;
            left: 50%;
            margin-top: 200px;
            margin-left: -400px;
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid red;
        }
        .fasong{
            cursor: pointer;
            position: relative;
            border-radius:20px;
            height: 42px;
            width: 120px;
            color: white;
            background-color: #00a7de;
        }
        .duinput{
            position: relative;
            width: 50%;
            font-size:14px;
            height:40px;
            border-radius:5px;
            border:1px solid #4abbd8;
            color:black;
            outline:0;
            text-align:left;
            padding-left: 10px;
            display:block;
        }
    </style>
</head>
<body>
<div id="yanzhengdianhua">
    <div style="width: 300px;margin-left: 250px;text-align: center">
        <b style="font-size: 2em">找回密码</b>
    </div>
    <div style="width: 500px;margin-left: 200px;margin-top: 30px">
        <div style="float: left;padding-top: 5px">
            <b style="font-size: 1.5em">账号绑定电话:</b>
        </div>
        <input id="phone" value="" style="margin:0 0 30px 10px;float: left" class="duinput" placeholder="电话号码">
    </div>
    <div style="width: 300px;margin-left: 260px">
        <div style="float: left;padding-top: 5px;text-align: center">
            <b style="font-size: 1.5em">验证码:</b>
        </div>
        <input id="yzm" style="margin:0 0 30px 10px;width: 160px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="验证码">
    </div>
    <div style="float: left;width:120px;height: 50px;"><button id="fasong" class="fasong">发送验证码</button></div>
    <div style="width: 300px;margin-left: 260px">
        <div style="float: left;padding-top: 5px;text-align: center">
            <b style="font-size: 1.5em">新密码:</b>
        </div>
        <input id="psw" type="password" style="float: left;margin:0 0 30px 10px;width: 160px" class="duinput" lay-verify="required" autocomplete="off" placeholder="输入新密码">
    </div>
    <div style="float: left;margin-left: 340px;margin-top: 30px;width:120px;height: 50px;"><button id="tijiao" class="fasong">提交</button></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script src="js/addressSelect.js" charset="utf-8"></script>

<script>
    $('#fasong').click(function () {
        if ($('#phone').val()==''){
            layer.msg('请填入电话号码');
        }else {
            $.ajax({
                url: '/user/sendSms/'+$('#phone').val(),
                method: 'GET',
                contentType: 'application/json',
                success: function(res) {
                    layer.msg(res.msg)
                }
            })
        }

    })

    $('#tijiao').click(function () {
        let ph=$('#phone').val()
        let ps=$('#psw').val()
        let yzm=$('#yzm').val()
        if (ph==''||ps==''||yzm==''){
            layer.msg('请输入完整信息');
        }
        else {
            $.ajax({
                url: '/user/findPassword',
                method: 'POST',
                contentType: 'application/json',
                data:JSON.stringify({
                    telephone:$('#phone').val(),
                    newPassword:$('#psw').val(),
                    code:$('#yzm').val()
                }),
                success: function(res) {
                    layer.msg(res.msg,{
                        end: function() {
                            if (res.code == 200) location.href = 'login.html';
                        }
                    })
                }
            })
        }
    })

</script>
</body>
</html>